<template>
	<view id="menu">
		<view class="nav-box">
			<view class="nav-box-text">
				<image src="@/static/img/home/person.png" class="person"></image>
				<view class="welcome">
					<view><text>姓名：{{ userInfo.nickName }}</text></view>
					<view><text>单位：{{ userInfo.dept.deptName }}</text></view>
				</view>
			</view>
		</view>
		<view class="project">
			<text>{{ projectInfo.name }}</text>
		</view>
		<view class="main-box">
			<!-- @click="item.path=='pages/infoSearch/index'?takeEwm(item.path):toPath(item.path)" -->
			<view 
				v-for="(item, index) in menus" 
				:key="item.menuId" 
				class="box-item" 
				@click="goPath(item.path)"
			>
			<uni-badge v-if="item.component=='pages/material/index'" size="small" :text="materCount==0?'':materCount" absolute="rightTop" type="error">
			    <view :class="['zljcIcon', item.icon]" :style="{ 'font-size': '32px', 'color': item.remark }"></view>
			    <text>{{ item.menuName }}</text>
			</uni-badge>
			<uni-badge v-else-if="item.component=='pages/inspection/index'" size="small" :text="qualityCount==0?'':qualityCount" absolute="rightTop" type="error">
			    <view :class="['zljcIcon', item.icon]" :style="{ 'font-size': '32px', 'color': item.remark }"></view>
			    <text>{{ item.menuName }}</text>
			</uni-badge>
			<view v-else class="">
				 <view :class="['zljcIcon', item.icon]" :style="{ 'font-size': '32px', 'color': item.remark }"></view>
				 <text>{{ item.menuName }}</text>
			</view>
				
			</view>
		</view>
	</view>
</template>

<script>
import { getProjectRouters } from '@/api/index'
import {getMessage} from '../../api/index.js'
import {decrypt} from '@/common/jsencrpty.js'
	
export default {
	data() {
		return {
			userInfo: {},
			projectInfo: {},
			menus: [],
			materCount:0,
			qualityCount:0
		};
	},
	onLoad() {
		this.userInfo = uni.getStorageSync('userInfo')
		this.userInfo.nickName = decrypt(this.userInfo.nickName)
		this.projectInfo = uni.getStorageSync('projectInfo')
		this.getMenu(this.projectInfo.id)
		this.getMessages()
	},
	methods: {
		//获取消息
		getMessages(){
			getMessage().then(res=>{
				if(res.code==200){
					this.materCount=res.data.materCount
					this.qualityCount=res.data.qualityCount
				}
			})
		},
		// 判断页面
		goPath(url){
			if(url == 'pages/infoSearch/index'||url == 'pages/reportCheck/index'){
				this.takeEwm(url)
			}else{
				this.toPath(url)
			}
		},
		// 初始化页面打开二维码
		takeEwm(url) {
			uni.scanCode({
				onlyFromCamera: true,
				scanType: ['qrCode'],
				success: res => {
					uni.navigateTo({
						url: '/' + url + '?qrCode=' + res.result
					})
				},
				fail: err => { 
					console.log('err: ', err);
				}
			});
		},
		getMenu(projectId) {
			uni.showLoading({
				title: '菜单加载中...'
			})
			getProjectRouters(projectId).then(res=>{
				uni.hideLoading()
				this.menus = res.data
				console.log(this.menus)
			})
		},
		toPath(url) {
			if (url == 'pages/bimPosition/indexView') {
				if (this.projectInfo.bim && this.projectInfo.panoramic) {
					uni.showActionSheet({
						itemList: ['BIM取样位置定位', '全景取样位置定位'],
						success: (e) => {
							let token = uni.getStorageSync('token')
							if (e.tapIndex == 0) {
								uni.navigateTo({
									url: '/' + url + '?token=' + token + '&projectId=' + this.projectInfo.id
								})
							} else {
								uni.navigateTo({
									url: '/pages/testPhoto/testPhoto?token=' + token + '&projectId=' + this.projectInfo.id
								})
							}
						}
					})
				} else {
					if (this.projectInfo.bim) {
						uni.navigateTo({
							url: '/pages/bimPosition/indexView'
						})
					} else if (this.projectInfo.panoramic) {
						uni.navigateTo({
							url: '/pages/testPhoto/testPhoto'
						})
					} else {
						uni.showToast({
							title: '暂无全景模型',
							icon: 'none'
						})
					}
				}
			} else {
				uni.navigateTo({
					url: '/' + url
				})
			}
		},
		onNavigationBarButtonTap(e) {
			this.$store.dispatch('Logout')
			uni.navigateTo({
				url: '/pages/login/index'
			})
		},
		onBackPress(e) {
			uni.navigateTo({
				url: '/pages/home/index'
			})
			return true;
		}
	}
};
</script>
<style lang="scss" scoped>
	::v-deep .uni-badge{
		left: 63.86rpx!important;
	}
	// ::v-deep .uni-badge--x{
	// 	   display: flex;
	// 	    align-items: center;
	// 	    flex-direction: column;
	// 	    justify-content: center;
	// }
.zljcIcon{
	text-align: center;
}
#menu {
	overflow: hidden;
	background-color: #fafafa;
	height: calc(100vh - 44px);

	.nav-box {
		width: 100vw;
		height: 160px;
		margin-top: -44px;
		padding: 56px 20px 56px 20px;
		background-image: url(../../static/img/home/head-bg.png);

		.nav-box-text {
			height: 50px;
			display: flex;
			align-items: center;

			.person {
				width: 48px;
				height: 48px;
			}
			.welcome {
				color: #333;
				font-size: 32rpx;
				margin-left: 40rpx;
			}
		}
	}

	.project {
		padding: 10px;
		border-radius: 8px;
		background-color: #fff;
		margin: -32px 20px 0 20px;
		box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);

		text {
			font-size: 14px;
			font-weight: 700;
		}
	}

	.main-box {
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
		border-radius: 10px;
		margin: 10px 20px 0 20px;
		background-color: #ffffff;

		.box-item {
			width: 25%;
			height: 80px;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			margin-top: 30px;
			image {
				width: 28px;
				height: 28px;
			}
			text {
				color: #333;
				font-size: 12px;
				margin-top: 10px;
				white-space: nowrap;
			}
		}
	}
}
</style>
